<template>
  <div class="register-page">
    <van-form @submit="onSubmit">
      <h2 class="title">用户注册</h2>

      <van-cell-group>
        <!-- 用户图像 -->
        <van-field name="uploader" label="文件上传">
          <template #input>
            <van-uploader v-model="value" :after-read="afterRead" />
          </template>
        </van-field>


        <!-- 用户账号 -->
        <van-field
            v-model="form.userAccount"
            label="用户账号"
            placeholder="6-20位字母数字"
            :rules="[{ required: true, message: '请输入账号' }]"
        />

        <!-- 用户密码 -->
        <van-field
            v-model="form.userPassword"
            type="password"
            label="用户密码"
            placeholder="8-20位字符"
            :rules="[{ required: true, message: '请输入密码' }]"
        />

        <!-- 确认密码 -->
        <van-field
            v-model="form.checkPassword"
            type="password"
            label="确认密码"
            placeholder="再次输入密码"
        />

        <!-- 星球编号 -->
        <van-field
            v-model="form.planetCode"
            label="星球编号"
            placeholder="XXX-XXX格式"
        />

        <!-- 用户昵称 -->
        <van-field
            v-model="form.username"
            label="用户昵称"
            placeholder="2-12位字符"
        />

        <!-- 性别选择 -->
        <van-field label="性别">
          <template #input>
            <van-radio-group v-model="form.gender" direction="horizontal">
              <van-radio :name="0">未知</van-radio>
              <van-radio :name="1">男</van-radio>
              <van-radio :name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <!-- 电话号码 -->
        <van-field
            v-model="form.phone"
            label="联系电话"
            placeholder="11位手机号"
            type="tel"
        />

        <!-- 电子邮箱 -->
        <van-field
            v-model="form.email"
            label="电子邮箱"
            placeholder="请输入邮箱"
            type="email"
        />
      </van-cell-group>

      <van-button
          block
          type="primary"
          native-type="submit"
          :loading="loading"
      >
        立即注册
      </van-button>

      <div class="tip">
        已有账号？<span @click="$router.push('/user/login')">去登录</span>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'
import myAxios from "../plugins/myAxios.ts";
import { useRouter } from "vue-router";
import { showSuccessToast, showFailToast } from 'vant';


const router = useRouter();

// 表单数据结构
const form = ref({
  userAccount: '',
  userPassword: '',
  checkPassword: '',
  planetCode: '',
  username: '',
  gender: 0,  // 默认未知
  phone: '',
  email: '',
})

// 加载状态
const loading = ref(false)

const value = ref([]);

// 提交注册
const onSubmit = async () => {

  if (value.value.length > 0) {
    for (const file of value.value) {
      await afterRead(file);
    }
  } else {
    console.log("No files to upload.");
  }

  try {
    loading.value = true
    const res = await myAxios.post('/user/register1', form.value)
    if (res?.code === 0) {
      showToast('注册成功')
      setTimeout(() => router.push('/user/login'), 1500)
    } else {
      showToast(res.description || '注册失败')
    }
  } finally {
    loading.value = false
  }
}


// 文件上传成功后的处理
const afterRead = async (file) => {
  console.log(file);
  const formData = new FormData();
  formData.append('file', file.file);
  try {
    const res = await myAxios.post("/user/upload", formData);
    console.log("resImage:", res);
  } catch (error) {
    console.error("Error uploading file:", error);
  }
};

</script>

<style scoped>
/* 保持原有样式不变 */
.register-page {
  padding: 20px;
  min-height: 100vh;
  background: #f8f9fa;
}

.title {
  text-align: center;
  margin: 40px 0;
  color: #333;
}

.tip {
  margin-top: 20px;
  text-align: center;
  color: #666;
}
.tip span {
  color: #07c;
  cursor: pointer;
}

:deep(.van-cell) {
  padding: 12px 16px;
}

/* 新增性别选择样式 */
:deep(.van-radio-group) {
  padding: 8px 0;
}
:deep(.van-radio) {
  margin-right: 20px;
}
</style>